<template>
  <!-- 个人中心 帮助中心 -->
  <div id="helpCenter">
    <div class="helpcenter">
      <div class="top">
        <span>帮助中心</span>
      </div>
      <div class="list">
        <ul>
          <li v-for="(item,index) in questionList" :key="index" style="color:rgba(77,77,77,1)" @click="todetail()">
            <span>{{item.queName}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //问题列表
      questionList: [
        {
          queName: "订单如何取消？"
        },
        {
          queName: "下单后还能修改订单吗？"
        },
        {
          queName: "如何进行企业认证？"
        },
        {
          queName: "如何获取积分？"
        },
        {
          queName: "订单如何取消？"
        },
        {
          queName: "下单后还能修改订单吗？"
        },
        {
          queName: "如何获取积分？"
        },
        {
          queName: "下单后还能修改订单吗？"
        }
      ]
    };
  },
  methods:{
      todetail(){
          this.$router.push({path:"/personalCenter/helpdetail"})
      }
  }
};
</script>

<style lang="scss" scoped>
.helpcenter {
  min-height: 600px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 5px 10px 1px rgba(204, 196, 196, 0.15);
  .top {
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    span {
      margin-left: 30px;
      font-size: 22px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(240, 58, 88, 1);
    }
  }
  .list {
    padding-left: 20px;
    box-sizing: border-box;
    ul {
      // list-style: none;
      padding: 0;
      margin: 20px 0 0 30px;
      font-size: 18px;
      font-family: FZLanTingHeiEL-SC;
      font-weight: 400;
      color: rgba(77, 77, 77, 1);

      li {
        margin-bottom: 20px;
        cursor: pointer;

        span {
          font-size: 18px;
          font-family: FZLanTingHeiEL-SC;
          font-weight: 400;
          color: rgba(77, 77, 77, 1);
        }
      }
    }
  }
}
</style>
